<template lang="html">
  <div>
      <div class="bt">
        <el-button type="primary" @click="back">返回上一级</el-button>
        <el-button type="primary" @click="addChildren" :disabled="disabled">新增节点</el-button>
        <el-button type="danger" @click="delTerr" :disabled="disabled">删除节点</el-button>
      </div>
      <div class="tree"  v-loading="loading">
        <div class="left">
            <el-tree
            :data="data"
            :props="defaultProps"
             @node-click="handleNodeClick">
           </el-tree>
        </div>
        <div class="r">
          <el-form :model="nodeData" ref="form" label-width="120px" :disabled="nodeData.isShow">
            <el-form-item label="分类节点名称">
                <el-input  placeholder="请输入内容" v-model="nodeData.nodeName"></el-input>
            </el-form-item>
            <el-form-item label="分类节点描述">
                <el-input  placeholder="请输入内容" v-model="nodeData.nodeIns"></el-input>
            </el-form-item>
            <el-form-item label="前端是否显示">
              <el-select v-model="nodeData.isView" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="节点排序">
                <el-input  placeholder="请输入内容" v-model="nodeData.nodeOrdinal"></el-input>
            </el-form-item>
          </el-form>
          <div class="btn">
              <el-button type="primary" @click="compileNode" v-if="nodeData.isShow == true">编辑</el-button>
              <el-button type="primary" @click="compileConfirm" v-else>确定</el-button>
              <el-button type="primary" @click="nodeData.isShow = true">取消编辑</el-button>
          </div>
        </div>
      </div>
      <div class="classification">
        分类列表
      </div>

      <div class="class_tree" v-loading="class_loading">
          <el-tree
            ref='tree'
            show-checkbox
            check-on-click-node
            default-expand-all
            node-key="categoryId"
            @check-change="class_handleNodeClick"
            :props="class_defaultProps"
            :data="class_data">
           </el-tree>
           <div class="bts">
               <el-button type="primary" @click='confirm_class'>确定添加</el-button>
           </div>
      </div>
      <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false" >
        <slot>
            <el-form :model="pageData" :rules="rules"  ref="ruleForm" label-width="180px" class="demo-ruleForm">
              <el-form-item label="分类父节点ID">
                  <el-input v-model="ruleForm.parentNodeId" placeholder="请输入内容"></el-input>
               </el-form-item>
               <el-form-item label="分类节点名称" prop="nodeName">
                   <el-input v-model="pageData.nodeName" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="分类节点描述" prop="nodeIns">
                    <el-input v-model="pageData.nodeIns" placeholder="请输入内容"></el-input>
                 </el-form-item>
                 <el-form-item label="前端是否显示" prop="isView">
                   <el-select v-model="pageData.isView" placeholder="请选择">
                         <el-option
                           v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                         </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="节点排序" prop="nodeOrdinal">
                      <el-input v-model="pageData.nodeOrdinal" placeholder="请输入内容"></el-input>
                   </el-form-item>
                 <el-form-item class="confirm">
                     <el-button type="primary" v-if="pageData.btnState=='1'" @click="upForm('post')">确定</el-button>
                     <el-button type="primary" v-if="pageData.btnState=='2'" @click="upForm('put')">更新</el-button>
                 </el-form-item>
            </el-form>
        </slot>
      </dialogVue>
  </div>
</template>

<script>
import tableVue from '@/components/alltable.vue'
import dialogVue from '@/components/dialog.vue'
import {
  node_Tree_List,
  add_Compile_Ios_Android_Tree,
  del_Ios_Android_Tree,
  tree_class,
  confirm_tree_class,
  tree_class_list
} from "@/api/shoppingCentre/Ios_Android_Class";
import Data from './index.js'
export default {
  components : {
    tableVue,
    dialogVue
  },
  data () {
    return  JSON.parse(JSON.stringify(Data))
  },
  mounted () {
    this.getNodeTree();
    this.getTreeClass();
  },
  methods :{
    gettree_class_list (id) {//分类树-节点-节点下关联的分类列表
      tree_class_list(id).then(res=>{
        if (res.data.code == 'OK') {
          this.categoryId = res.data.data.map(item=>{
            return item.categoryId
          });
          this.$refs.tree.setCheckedKeys(this.categoryId);
        } else {
         this.$message.error(res.data.message)
        }
      })
    },
    getTreeClass () {//商品分类列表
      tree_class().then(res=>{
        if (res.data.code == 'OK') {
          this.class_data = res.data.data;
          this.class_loading = false;
        }else {
          this.$message.error(res.data.message)
        }
      })
    },
    getNodeTree () {//获取节点树
        node_Tree_List(JSON.parse(this.$route.query.id)).then(res=>{
        if (res.data.code == 'OK') {
          this.data = res.data.data.nodes;
          this.loading = false;
          this.disabled = false;
        } else {
          this.$message.error(this.data.message)
        }
      })
    },
    addChildren () {//新增子节点弹窗
      this.$refs.ruleForm&&this.$refs.ruleForm.resetFields()
      this.pageData = {}
      this.dialog = true;
      this.pageData.btnState = '1';
    },
    back () {//返回上一级
      this.$router.push({
        name : 'Ios_Android_Class'
      })
    },
    handleNodeClick (data) {//点击节点
      this.ruleForm.parentNodeId = data.treeNodeId;
      this.ruleForm.data = data;
      this.nodeData.treeNodeId = data.treeNodeId;
      this.nodeData.nodeName = data.nodeName;
      this.nodeData.isView = data.isView;
      this.nodeData.nodeOrdinal = data.nodeOrdinal;
      this.nodeData.nodeIns = data.nodeIns;
      this.gettree_class_list(data.treeNodeId)
    },
    handSize (){},
    changeData (data) {
      this.dialog = data;
    },
    upForm (method) {//新增节点
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let data = {
            frontTreeId : JSON.parse(this.$route.query.id),
            parentNodeId : this.ruleForm.parentNodeId,
            nodeName : this.pageData.nodeName,
            nodeIns : this.pageData.nodeIns,
            isView : this.pageData.isView,
            nodeOrdinal : parseInt(this.pageData.nodeOrdinal),
          }
          add_Compile_Ios_Android_Tree(data,method).then(res=>{
            if (res.data.code == 'OK') {
                this.getNodeTree();
                this.dialog = false;
                if (method == 'post') {
                  this.$message.success('新增节点成功');
                } else {
                  this.$message.success('编辑节点成功')
                }
            } else {
               this.$message.error(res.data.message)
            }
          })
        }
      });
    },
    compileNode () {//验证是否点击节点
      if (this.ruleForm.data == undefined) {
         this.$message.error('请选择要编辑的节点')
         return false
      }
      this.nodeData.isShow = false;
    },
    compileConfirm () {//编辑节点
      let data = {
        frontTreeId : JSON.parse(this.$route.query.id),
        nodeName : this.nodeData.nodeName,
        nodeIns : this.nodeData.nodeIns,
        isView : this.nodeData.isView,
        nodeOrdinal : parseInt(this.nodeData.nodeOrdinal),
        treeNodeId : this.nodeData.treeNodeId
      }
      add_Compile_Ios_Android_Tree(data,'put').then(res=>{
        if (res.data.code == 'OK') {
            this.getNodeTree();
            this.$message.success('编辑节点成功');
            this.nodeData.isShow = true;
        } else {
           this.$message.error(res.data.message)
        }
      })
    },
    delTerr () {//删除节点
       if (JSON.stringify(this.ruleForm.data) == undefined) {
         this.$message.error('请选择要删除的节点')
         return false
       }
       this.delMessage(()=>{
         var id = [];
         id.push(this.ruleForm.data.treeNodeId)
          del_Ios_Android_Tree(id).then(res=>{
             if (res.data.code == 'OK') {
                 this.getNodeTree();
                 this.$message.success('删除节点成功')
             } else {
                this.$message.error(res.data.message)
             }
          })
       })
    },
    class_handleNodeClick (data,pitch) {
      if (pitch == true) {
          this.categoryId.push(data.categoryId)
      } else {
         this.categoryId.map((item,idx)=>{
           if (item == data.categoryId) {
              this.categoryId.splice(idx,1)
           }
         })
      }
    },
    confirm_class () {
     if (this.nodeData.treeNodeId == '' ||  this.categoryId.length < 1) {
          this.$message.error('请选择要添加节点或者添加分类')
          return false
     }
     let set = new Set(this.categoryId)
     let id = Array.from(set)
      var data = {
        treeNodeId : this.nodeData.treeNodeId ,
        categorys : id
      }
      confirm_tree_class(data).then(res=>{
        if (res.data.code == 'OK') {
            this.$message.success('关联成功')
            this.$router.push({
              name : 'Ios_Android_Class'
            })
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style scoped>
 @import "../../../../../styles/common.css";
.bt {
  margin: 20px 0;
}
.tree {
    padding-bottom: 20px;
    display: flex;
    height: 100%;
    background: #fff;
}
.el-tree {
  padding: 25px 10px;
}
.left {
  width: 400px;
}
.r {
  padding-top: 20px;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 100px;
}
.classification {
  font-size: 20px;
  height: 60px;
  line-height: 60px;
  color: #409EFF;
  margin-left: 20px;
}
.bts{
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-bottom: 20px; */
}
.class_tree {
  height: 400px;
  overflow-y: auto;
}
</style>
